import { Button, Image, View } from "@tarojs/components"
import React, { useEffect, useState } from "react"
import Taro from "@tarojs/taro"
import "./index.scss"
import { statusData } from "../../../../common"
import copyIcon from "../../../../assets/images/copy.png"
import { copyText } from "../../../../utils"

export default function HistoryItem({ itemData }) {
  return (
    <View
      className="component-history-item"
      onClick={() => Taro.navigateTo({ url: "/pages/orderDetail/index?id=" + itemData.ticketId })}
    >
      <View className="history-item-header">
        <View className="history-item-header-time">{itemData.createdAt}</View>
        <View className="history-item-header-status" style={{ color: statusData[Number(itemData.status)].color }}>
          {statusData[Number(itemData.status)].name}
        </View>
      </View>
      <View className="history-item-body">
        <View className="history-item-info">
          <View className="history-item-row">
            <View className="history-item-row-label">球拍信息：</View>
            <View className="history-item-row-value">{`${itemData.racketBrand}/${itemData.threadingType || "-"}${itemData.threadingType === '自带' ? '' : '/' + itemData.lineType}/${itemData.linePound}`}</View>
          </View>
          <View className="history-item-row">
            <View className="history-item-row-label">订单号：</View>
            <View className="history-item-row-value">
              <View>{itemData.ticketId}</View>
              <Image
                src={copyIcon}
                className="copy"
                onClick={e => {
                  e.stopPropagation()
                  e.preventDefault()
                  copyText(itemData.ticketId)
                }}
              ></Image>
            </View>
          </View>
        </View>
        <View className="history-item-footer">
          <View className="history-item-money">合计：{itemData.price?.toFixed(2)}（元）</View>
        </View>
      </View>
    </View>
  )
}
